<template>
	<div class="CommodityNumber">
		<!-- 商品主数据列表-->
		<el-dialog v-dialogDrag title="选取商品主数据" width="800px" top="1vh" :visible.sync="dialog.show" center append-to-body
			:close-on-click-modal="false">
			<div style="padding-bottom: 40px;">
				<div style="display: flex;flex-wrap: wrap;margin-bottom: 10px;">
					<lz-row-col label="商品编号">
						<el-input v-model="dialog.seach.materialNo" placeholder="请输入商品编号" :size="size"
							@keyup.enter.native="dialogSeach"></el-input>
					</lz-row-col>
					<lz-row-col label="商品名称">
						<el-input v-model="dialog.seach.materialName" placeholder="请输入商品名称" :size="size"
							@keyup.enter.native="dialogSeach"></el-input>
					</lz-row-col>
					<lz-row-col>
						<el-button type="primary" icon="el-icon-search" :size="size" style="margin:0 10px;"
							@click="dialogSeach()">搜索</el-button>
					</lz-row-col>
				</div>
		
				<el-table :data="dialog.list" border size="mini">
					<el-table-column label="商品名称" width="240" >
						<template slot-scope="scope">
							<el-radio :label="JSON.stringify(scope.row)" v-model="dialog.selectItem">
								{{scope.row.materialName||' '}}</el-radio>
						</template>
					</el-table-column>
					<el-table-column prop="materialNo" name="商品编号" :label="computeInputBox('materialNo','label')" width="160"  sortable></el-table-column>
					<el-table-column prop="materialDescription" name="商品规格" :label="computeInputBox('materialDescription','label')" show-overflow-tooltip 
						width="120" sortable></el-table-column>
					<el-table-column prop="materialUnit" name="计量单位" :label="computeInputBox('materialUnit','label')" show-overflow-tooltip  width="120"
						sortable></el-table-column>
					<el-table-column prop="note" name="备注" :label="computeInputBox('note','label')" show-overflow-tooltip  sortable></el-table-column>
					<el-table-column prop="createdBy" label="创建人" show-overflow-tooltip  sortable width="120">
					</el-table-column>
					<el-table-column prop="createdDate" label="创建时间" show-overflow-tooltip  sortable
						width="120"></el-table-column>
				</el-table>
				<!-- //分页 -->
				<el-pagination style="float: right;margin-top: 10px;" class="lz-el-pagination"
					@current-change="dialoghandleCurrentChange" @size-change="dialoghandleSizeChange"
					:current-page="dialog.page.pageNum" :page-sizes="[10,20,30]" :page-size="dialog.page.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="dialog.page.total">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.show = false" size="mini">取 消</el-button>
				<el-button type="primary" @click="bindConfiguration" size="mini">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	let that;
	import {
		mapGetters
	} from 'vuex';
	import lzRowCol from '@/components/lzRowCol/lzRowCol';
	export default {
		components: {lzRowCol},
		name: 'addressList',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		computed: {
			...mapGetters(['size', 'themeBtColor', 'api', 'headerCellStyle', 'InputBoxList']),
			computerCompanyKind(){
				return (text) => {
					if (text == '1') {
						return '一般纳税人';
					}else if (text == '2') {
						return '小规模纳税人';
					}else if (text == '3') {
						return '个体户';
					}else if (text == '4') {
						return '外币公司';
					}else if (text == '5') {
						return '三来一补';
					}
				};
			},
			//计算出当前输入框配置信息
			computeInputBox() {
				return (field, type) => {
					let arr = this.InputBoxList.find(item => item.fieldName == field)
					if (arr && type == 'show') {
						return arr.isVisible == 0 ? true : false //0为显示1为隐藏
					}
					if (arr && type == 'isInput') {
						return arr.isInput == 0 ? field : '' //0为必填1为不必填
					}
					if (arr && type == 'disabled') {
						return arr.isDisplay == 0 ? true : false //0为只读1为可读写
					}
					if (arr && type == 'label') {
						return arr.fieldLabel //标签动态显示名称
					}
					return false
				}
			}
		},
		data() {
			return {
				dialog: {
					show: false,
					selectItem: '', //已选择的
					seach: {
						materialNo: '', //商品编号
						materialName: '', //商品名称
					},
					list: [],
					page: {
						pageNum: 1, //当前页数
						pageSize: 10, //默认一页展示10条
						total: 0, //总条数
					}
				},
			};
		},
		mounted() {
			that = this;
		},
		methods: {
			//获取到光标
			focusFn() {
				that.dialog.show = true
				that.dialog.seach = {
					materialNo: '', //商品编号
					materialName: '', //商品名称
				}
				that.dialog.page.pageNum = 1
				that.dialog.selectItem=''
				//获取商品列表
				that.getCustomerList()
			},
			//弹框确定
			bindConfiguration() {
				let item = JSON.parse(that.dialog.selectItem)
				that.dialog.show = false
				that.$emit('submit',item)
			},
			//获取商品列表
			getCustomerList() {
				let req = {
					showLoading: true,
					pageNo: that.dialog.page.pageNum,
					pageSize: that.dialog.page.pageSize,
					...that.dialog.seach,
					
				};
				that.GLOBAL.doGet(that.api.GLOBAL_masterdata_material_list, req).then(res => {
					if (res.code == 200 && res.result) {
						that.dialog.page.total = res.result.total;
						that.dialog.list = res.result.records;
					} else {
						that.dialog.page.total = 0;
						that.dialog.list = [];
					}
				});
			},
			//搜索
			dialogSeach() {
				that.dialog.page.pageNum = 1
				//获取商品列表
				that.getCustomerList()
			},
			//分页
			dialoghandleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				that.dialog.page.pageNum = val;
				//获取商品列表
				that.getCustomerList()
			},
			//选择一页多少条
			dialoghandleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				that.dialog.page.pageSize = val;
				//获取商品列表
				that.getCustomerList()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.CommodityNumber {
	}
</style>
